<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>

    <!-- 引入bootstrap插件 -->
    <link class = ""nk rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- 引入动画库 -->
    <link class = ""nk rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 引入重写文件 重置html元素的自带的样式 -->
    <link class = ""nk rel="stylesheet" type="text/less" href="./assets/css/reset.less" />

    <!-- 引入自己的样式文件 -->
    <link class = ""nk rel="stylesheet" type="text/less" href="./assets/css/index.less" />
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-inverse">
        <div class="container">
            <!-- 左侧的元素 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <a class="navbar-brand wow bounceInDown" href="javasciprt:void(0)">Spirit8</a>
            </div>
            
            <!-- 导航元素 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class = ""><a class="wow bounceInDown" data-wow-delay="0ms" href="#banner">HOME</a></li class = "">
                    <li class = ""><a class="wow bounceInDown" data-wow-delay="100ms" href="#about">ABOUT</a></li class = "">
                    <li class = ""><a class="wow bounceInDown" data-wow-delay="150ms" href="#services">SERVICES</a></li class = "">
                    <li class = ""><a class="wow bounceInDown" data-wow-delay="200ms" href="#clients">portfolio</a></li class = "">
                    <li class = ""><a class="wow bounceInDown" data-wow-delay="150ms" href="#testimonials">testimonials</a></li class = "">
                    <li class = ""><a class="wow bounceInDown" data-wow-delay="300ms" href="#contact">CONTACT</a></li class = "">
                </ul>
            </div>
        </div>
    </nav>

    <!-- banner图 -->
    <div class="banner" id="banner">
        <div class="title wow bounce">
            wELCOME on <span>spirit8</span>
        </div>

        <div class="subtitle wow bounceInDown">
            We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
        </div>

        <div class="more wow bounceIn">
            <a href="#footer">↓</a>
        </div>
    </div>

    <!-- about -->
    <div class = "about" id="about">
        <div class="container">

            <!-- 左边 -->
            <div class = "left">
                <!-- image -->
                    <img src="./assets/images/about-background.png" />
            </div>  
            <!-- 右边 -->
            <div class = "right">
                <div class = "subject">
                    <div class = "small">About Us</div>
                    <div class = "big">
                        <span>Some</span>
                        words
                        <span>about us</span>
                    </div>
                </div>

                <!-- 段落p -->
                <p class = "desc">We love building and rebuilding brands through our specific skills.Using colour,fonts,and illustration,we brand companies in a way they will never forget.</p>

                <!-- 列表ul -->
                <ul class = "list">
                    <li class = "li">
                        <img src = "./assets/images/about-list-bg.png">
                        <span>Mission -</span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                    <li class = "">
                        <img src = "./assets/images/about-list-bg.png">
                        <span>Skills -</span>
                        <span>Delivering fast and excellent results</span>
                    </li>
                    <li class = "">
                        <img src = "./assets/images/about-list-bg.png">
                        <span>Clients -</span>
                        <span>Sactified clients thanks to our experience</span>
                    </li>
                </ul>

                <!-- 按钮 -->
                <div class = "more">
                    <img src = "./assets/images/about-btn.png" aria-hidden = "true">
                    <span>BROWSE OUR WORK</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Team团队 -->
    <div class = "team" id = "team">
        <div class = "container">
            <!-- 标题 -->
            <div class = "title">
                MEET
                <span>OUR TEAM</span>
            </div>

            <!-- 列表 -->
            <div class = "list">
                <div class = "item">
                    <!-- 图片 -->
                    <div class = "cover">
                        <img src="./assets/images/cover.png" />
                    </div>
                    <!-- 描述 -->
                    <div class = "box">
                        <p>Jason Statham</p>
                        <p>Knife designer</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>

                <div class = "item">
                    <!-- 图片 -->
                    <div class = "cover">
                        <img src="./assets/images/cover.png" />
                    </div>
                    <!-- 描述 -->
                    <div class = "box">
                        <p>Van Damme</p>
                        <p>No English</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>

                <div class = "item">
                    <!-- 图片 -->
                    <div class = "cover">
                        <img src="./assets/images/cover.png" />
                    </div>
                    <!-- 描述 -->
                    <div class = "box">
                        <p>Sylvester Stallone</p>
                        <p>Cigar Lover</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>

                <div class = "item">
                    <!-- 图片 -->
                    <div class = "cover">
                        <img src="./assets/images/cover.png" />
                    </div>
                    <!-- 描述 -->
                    <div class = "box">
                        <p>jet Li</p>
                        <p>I need more money</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>
            </div>

            <!-- 选项 -->
            <div class = "options">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- services -->
    <div class = "services" id = "services">
        <div class = "container">
            <!-- 标题 -->
            <div class = "title">
                TAKE A LOOK AT
                <span> OUR SERVICES</span>
            </div>

            <!-- 文字段落 -->
            <div class = "desc">
                Lorem Lpsum comes from sections 1.10.32 and 1.10.33 of"de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>

            <!-- 列表 -->
            <div class = "list">
                    <div class = "item">
                        <!-- 图片 -->
                        <div class = "cover">
                            <image src="./assets/images/01.png" />
                        </div>

                        <!-- 描述 -->
                        <div class = "illu">
                            <span>WEB DESIGN</span>
                        </div>

                        <!-- 文字 -->
                        <div class = "text">
                            <span>The first line of Lorem Ipsum, "LoremIpsum dolor sit amet.", comes from a line in section 1.10.32</span>
                        </div>
                   </div>

                   <div class = "item">
                        <!-- 图片 -->
                        <div class = "cover">
                            <image src="./assets/images/02.png" />
                        </div>

                        <!-- 描述 -->
                        <div class = "illu">
                            <span>MOBILE APPS</span>
                        </div>

                        <!-- 文字 -->
                        <div class = "text">
                            <span>The first line of Lorem Ipsum, "LoremIpsum dolor sit amet.", comes from a line in section 1.10.32</span>
                        </div>
                   </div>

                   <div class = "item">
                        <!-- 图片 -->
                        <div class = "cover">
                            <image src="./assets/images/03.png" />
                        </div>

                        <!-- 描述 -->
                        <div class = "illu">
                            <span>PHOTOGRAPHY</span>
                        </div>

                        <!-- 文字 -->
                        <div class = "text">
                            <span>The first line of Lorem Ipsum, "LoremIpsum dolor sit amet.", comes from a line in section 1.10.32</span>
                        </div>
                   </div>

                   <div class = "item">
                        <!-- 图片 -->
                        <div class = "cover">
                            <image src="./assets/images/04.png" />
                        </div>

                        <!-- 描述 -->
                        <div class = "illu">
                            <span>MARKETING</span>
                        </div>

                        <!-- 文字 -->
                        <div class = "text">
                            <span>The first line of Lorem Ipsum, "LoremIpsum dolor sit amet.", comes from a line in section 1.10.32</span>
                        </div>
                   </div>

            </div>
        </div>
    </div>

     <!-- clients -->
    <div class = "clients" id = "clients">
        <!-- 标题 -->
        <div class = "title" >
            SOME OF
            <span> OUR CLIENTS</span>
        </div>

        <!-- 列表 -->
        <div class = "list">
            <div class = "item">
                <!-- 图片 -->
                <div class = "cover">
                    <img src="./assets/images/Layer 69.png" />
                </div>
            </div>

            <div class = "item">
                <div class = "cover">
                    <img src="./assets/images/Layer 65.png" />
                </div>
            </div>

            <div class = "item">
                <div class = "cover">
                    <img src="./assets/images/Layer 68.png" />
                </div>
            </div>

            <div class = "item">
                <div class = "cover">
                    <img src="./assets/images/Layer 68.png" />
                </div>
            </div>

            <div class = "item">
                <div class = "cover">
                    <img src="./assets/images/Layer 67.png" />
                </div>
            </div>
        </div>
        <!-- 选项 -->
        <div class = "options">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <!-- work -->
     <div class = "work" id = "work">
        <div class = "container">
        <!-- 标题 -->
            <div class = "title" >
                TAKE A LOOK AT
                <span> OUR WORK</span>
            </div>
            <!-- 文字段落 -->
            <div class = "desc">
                Lorem Lpsum comes from sections 1.10.32 and 1.10.33 of"de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
            <!-- 元素elements -->
            <div class = "elements">
                <div class = "left">
                    <span>FLITER MY TYPE</span>
                </div>
                <div class = "right">
                    <div class = "classify">
                        <span data-type="all" class="active">All</span>
                        <span = "separator"> | </span>
                        <span data-type="web">Web design</span>
                        <span = "separator"> | </span>
                        <span data-type="mobile">Mobile design</span>
                        <span = "separator"> | </span>
                        <span data-type="photo">Photography</span>
                    </div>
                </div>
            </div>
            <div class = "list">
                    <!-- 图片 -->
                <div class = "cover">
                    <image src="./assets/images/work-img.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img2.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img2.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img2.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img2.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img2.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img3.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img3.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img3.png" />
                </div>
                <div class = "cover">
                    <image src="./assets/images/work-img3.png" />
                </div>
            </div>
           
        </div>

    </div>

    <!-- testimonials -->
    <div class = "testimonials" id = "testimonials">
        <!-- 标题 -->
        <div class = "title" >
            <span> OUR CLIENTS' </span>
            TESTIMONIALS
        </div>

        <!-- 列表 -->
        <div class = "list">
            <div class = "desc">
                THIS BOOK IS A TREATISE ON THE THEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE. THE FIRST LINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET..", COMES FROM A LINE IN SECTION 1.10.32.
            </div>
            <div class = "comment">
                <span>Dean Martin, </span>
                CEO Acme Inc.
            </div>
        </div>
        <!-- 选项 -->
        <div class = "options">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <!-- 联系我们 -->
    <div class="contact" id="contact">
        <div class="container">
            <!-- 标题 -->
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                feel free to<span> contact us</span>
            </div>
            
            <!-- 段落 -->
            <p class="desc wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</p>

            <!-- 表单 -->
            <div class="register">
                <form name="register" method="post">
                    <div class="top wow fadeInUp" data-wow-delay="300ms">
                        <div class="item">
                            <h5>Name<sup>*</sup></h5>
                            <div class="input">
                                <input type="text" name="username" placeholder="请输入用户名称" required />
                            </div>
                        </div>
                        <div class="item">
                            <h5>Email Address<sup>*</sup></h5>
                            <input type="email" name="email" placeholder="请输入邮箱" required />
                        </div>
                    </div>

                    <div class="bottom wow fadeInUp" data-wow-delay="400ms">
                        <h5>Message<sup>*</sup></h5>
                        <textarea name="message" placeholder="请输入内容" required></textarea>
                    </div>

                    <div class="send wow fadeInUp" data-wow-delay="500ms">
                        <button type="submit" class="wow fadeInUp" data-wow-delay="500ms">SEND</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="footer" id="footer">
        <div class="container">
            <p class="copyright wow fadeInUp" data-wow-delay="100ms">ALL RIGHTS RESERVED. COPYRIGHT © <span>2014 SPIRIT8</span></p>
            <div class="link">
                <div class="item wow fadeInUp" data-wow-delay="200ms"><img src="./assets/images/footer1.png" /></div>
                <div class="item wow fadeInUp" data-wow-delay="300ms"><img src="./assets/images/footer2.png" /></div>
                <div class="item wow fadeInUp" data-wow-delay="400ms"><img src="./assets/images/footer3.png" /></div>
                <div class="item wow fadeInUp" data-wow-delay="500ms"><img src="./assets/images/footer4.png" /></div>
                <div class="item wow fadeInUp" data-wow-delay="600ms"><img src="./assets/images/footer5.png" /></div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <div id="up" class="up" >
        <a href="#banner" class="op"><img src="./assets/images/top.svg"></a>
    </div>

</body>
</html>
<!-- 依赖jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap插件脚本 -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入less 编译css的一个插件 -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入瀑布流插件的js文件 -->
<script src="./assets/js/wow.min.js"></script>

<script>
    // 实例化瀑布流插件
    new WOW().init()

    // 图片数据
    const workImages = {
        all: [
            './assets/images/work-img.png',
            './assets/images/work-img.png',
            './assets/images/work-img.png',
            './assets/images/work-img.png',
            './assets/images/work-img2.png',
            './assets/images/work-img2.png',
            './assets/images/work-img2.png',
            './assets/images/work-img2.png',
            './assets/images/work-img3.png',
            './assets/images/work-img3.png',
            './assets/images/work-img3.png',
            './assets/images/work-img3.png'
        ],
        web: [
            './assets/images/work-img.png',
            './assets/images/work-img.png',
            './assets/images/work-img.png',
            './assets/images/work-img.png'
        ],
        mobile: [
            './assets/images/work-img2.png',
            './assets/images/work-img2.png',
            './assets/images/work-img2.png',
            './assets/images/work-img2.png'
        ],
        photo: [
            './assets/images/work-img3.png',
            './assets/images/work-img3.png',
            './assets/images/work-img3.png',
            './assets/images/work-img3.png'
        ]
    };

    // 切换图片函数
    function renderWorkList(type) {
        const list = document.querySelector('.work .list');
        if (!list) return;
        list.innerHTML = '';
        (workImages[type] || []).forEach(src => {
            const div = document.createElement('div');
            div.className = 'cover';
            const img = document.createElement('img');
            img.src = src;
            div.appendChild(img);
            list.appendChild(div);
        });
    }

    // 分类点击事件
    document.querySelectorAll('.work .classify span[data-type]').forEach(span => {
        span.addEventListener('click', function() {
            // 切换激活样式
            document.querySelectorAll('.work .classify span[data-type]').forEach(s => s.classList.remove('active'));
            this.classList.add('active');
            // 渲染图片
            renderWorkList(this.getAttribute('data-type'));
        });
    });

    // 页面加载默认显示全部
    renderWorkList('all');
</script>